<template>
  <div>
    <div class="list-tabs">
      <div @click="sel(1)" :class="{activea:num==1}">自营</div>
      <div @click="sel(2)" :class="{activeb:num==2}">贝式严选</div>
      <div class="list-tabs-c">&nbsp;</div>
    </div>
    <goodsList v-bind:tablist="tabData" v-if="tabData.length!=0"></goodsList>
    <!-- 底部注释 -->
    <div class="jg-gonggao">
      <div class="jg-gonggao1">
        <div class="jg-text-z">划线价格</div>
        <div class="jg-text-y">商品的专柜价、吊牌价、正品零售价、厂商指导价或该商品的曾经展示过的销售价等，并非原价，仅供参考。</div>
      </div>
      <div class="jg-gonggao1">
        <div class="jg-text-z">未划线价格</div>
        <div class="jg-text-y">商品的实时标价，不因表述的差异改变性质。具体成交价格根据商品参加活动，或会员使用优惠券、积分等发生变化，最终以订单结算页价格为准。</div>
      </div>
    </div>
  
  </div>
</template>
<script>
import goodsList from "@/components/main/item1";
export default {
  data() {
    return {
      num: 1,
      goodsList: [
        { title: "经典", mark: "KSK", list: [], calas: "activea" },
        { title: "女神", mark: "NS", list: [], calas: "activeb" },
        { title: "伴手礼", mark: "JZ", list: [], calas: "activec" },
        { title: "乳品", mark: "RP", list: [], calas: "actived" }
      ],
      tabData: []
    };
  },
  mounted() {
    this.pageInit();
  },
  components: { goodsList },

  computed: {},
  methods: {
    pageInit() {
      this._getNsCakeCenter(res => {
        // res.map(item => {
        //   item.ImgUrl = this.$global.setUrl(item);
        //   console.log(item);
        // });
        this.goodsList.map(item => {
          // console.log(item.mark);
          res.map(it => {
            if (it.SupplyNo.indexOf(item.mark) != -1) {
              it.ImgUrl = this.$global.setUrl(it); //筛选拼接图片
              item.list.push(it); //筛选分类数据
            }
          });
        });
        this.sel(1);
      });
      // console.log(this.goodsList)
    },
    _getNsCakeCenter(callBack) {
      this.$apis.getNsCakeCenter().then(res => {
        callBack(res.data.Tag.cakelist);
      });
    },
    sel(n) {
      this.num = n;
      if (n == 1) {
        this.tabData = this.goodsList.slice(0, 3);
      } else {
        this.tabData = this.goodsList.slice(3);
      }
      // console.log(this.tabData)
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
/*选项卡*/
.list-tabs {
  position: relative;
  height: 9.33vw;
  border-bottom: 1px solid #d9d9d9;
  height: 12vw;
  .activea {
    color: #1db0b8;
  }
  .activeb {
    color: #1db0b8;
  }
  div:nth-child(1) {
    width: 50%;
    float: left;
    font-size: 4.266vw;
    text-align: center;
    height: 8.533vw;
    height: 13vw;
    line-height: 12vw;
  }
  div:nth-child(2) {
    width: 50%;
    float: right;
    font-size: 4.266vw;
    text-align: center;
    height: 8.533vw;
    height: 13vw;
    line-height: 12vw;
  }
  div:nth-child(3) {
    width: 50%;
    height: 0.533vw;
    background: #1db0b8;
    position: absolute;
    bottom: 0;
    transition: left 1s;
  }
  .activea ~ .list-tabs-c {
    left: 0;
  }
  .activeb ~ .list-tabs-c {
    left: 50%;
  }
}

//底部注释
.jg-gonggao {
   float: left;
  display: block;
  margin-bottom: r(100);
  padding: 2vw 0;
}
.jg-gonggao1 {
  float: left;
  margin: 0 4vw;
  font-size: 3.734vw;
  margin-bottom: 4vw;
}
.jg-text-z {
  text-align: left;
  float: left;
  width: 27vw;
  color: #181818;
}
.jg-text-y {
  line-height: 1.6;
  text-align: left;
  float: left;
  width: 65vw;
  color: #a2a2a2;
}


</style>
